<%@ page contentType="text/html; charset=utf-8" %>
<%--
    JSP Name : list.jsp
    Description : 전시차량 리스트
    author ETLee
    since 2012. 6. 28.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 6. 28.     ETLee     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
<c:set var="domain">${header.host}</c:set>
<c:choose>
    <c:when test="${domain == 'krdev.hyundai.com'}">
    <!-- krdev.hyundai.com naver api key -->
    <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=48889bb18d2195c1fc2c1e2ddf276d84"></script>
    </c:when>
    <c:when test="${domain == 'krdev2.hyundai.com'}">
    <!-- krdev2.hyundai.com naver api key -->
    <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=310e277ce0a999d0f0da4b9ee8128294"></script>
    </c:when>
    <c:when test="${domain == 'www.hyundai.com'}">
    <!-- www.hyundai.com naver api key -->
    <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=01c5128b3b1da83c6f5ddf3f634ac9f7"></script>
    </c:when>
    <c:when test="${domain == 'www3.hyundai.com'}">
    <!-- www3.hyundai.com naver api key -->
    <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=c8a77349edc1766a6a2a7e13e67c1926"></script>
    </c:when>
    <c:otherwise>
    </c:otherwise>
</c:choose>
<script type="text/javascript">
    function fnListView(obj, carCd){
        if(obj != ''){
            $('.exhibit-car-list > div > div').attr('class','');
            $('.exhibit-car-list > div > div').each(function(){
                $('.exhibit-car-list > div > div:eq('+ obj +')').attr('class','on');
            });
        }
        $('#selectedCarCd').val(carCd);
        var brDtlAdr1 = $('#brDtlAdr1 option:selected').val();
        var param = $('form[name="searchForm"]').serialize();
        if(brDtlAdr1 == ''){
            alert("지역을 선택해주세요");
            return;
        }
        $.ajax({
            type:'POST',
            url:'/kr/biz/selectDspCarDtlPaging.do',
            data:param + '&carCd='+ carCd,
            dataType:'html',
            cache:false,
            error:function(){
               alert("데이터를 가져오지 못하였습니다.");
            },
            success:function ( html, status ){
                $('#brListArea').html('');
                $('#brListArea').html($.trim(html));
                //checkPopup();
            }
        });
    }

    function fnView(brCd, brScn, brViewType, popType){
        var param = "brCd="+ brCd +"&brScn="+ brScn +"&brViewType="+ brViewType;
        $.ajax({
            type:'POST',
            url:'/kr/biz/selectBizNwrkMgmtView.do',
            data:param,
            dataType:'html',
            cache:false,
            error:function(){
               alert("팝업의 데이터를 가져오지 못하였습니다.");
            },
            success:function ( html, status ){
                $('#popContents').html($.trim(html));
                fnInsertPopup('#popContents', popType);
                //checkPopup();
            }
        });
    }

    function fnImageView(nrFilNm, carNm, grdNm, trimNm, xrclCtyNm){
        $.ajax({
            type:'POST',
            url:'/kr/biz/selectBizDspCarImageView.do',
            data:'vehlImageName='+ nrFilNm +'&carNm='+ carNm +'&grdNm='+ grdNm +'&trimNm='+ trimNm +'&xrclCtyNm='+ xrclCtyNm,
            dataType:'html',
            cache:false,
            error:function(){
               alert("팝업의 데이터를 가져오지 못하였습니다.");
            },
            success:function ( html, status ){
                $('#carViewArea').html('');
                $('#carViewArea').html($.trim(html));
                fnInsertPopup('#carViewArea', '');
                //checkPopup();
            }
        });
    }

    function fnInsertPopup(area, type){
        $(area).height('');
        if(type != 'pop' || type == ''){
            $('body').dimmedFrame();
            $('.dimmed-frame').css({height:$("#wrap").height()});
        }
        //$(area).css("display", "block");
        $(area).css({top:$(window).scrollTop()+150}).show();
    }

    function closeLayer(area){
        $(area).html('');
        $('.dimmed-frame').remove();
    }

    function fnTabLayerToggle(obj){
        $('#tab-wrap > ul > li').attr("class", "");
        $('.service-tab').css('display','none');
        $('#tab-wrap > ul > li').each(function(){
            $('#tab-wrap > ul > li:eq('+ obj +')').attr("class", "on");
            $('.service-tab:eq('+ obj +')').css('display','');
        });
    }

    $(document).ready(function() {
        $('select.select1').customSelect();
    })
</script>
</head>
<body>
<%//@ include file="/include/layerpopup.jsp" %>
<div id="wrap">
    <%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
    <%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>
    <hr />

    <%@ include file="/WEB-INF/jsp/com/include/sub_header_counsel04.jspf" %>
    <hr />

    <div id="container">
        <div id="subtitle-area"><div class="subtitle-area-inner">
            <h4><img src="/kr/images/title/h4_counsel_branch_inquiry03.gif" alt="전시차 조회" /></h4>
            <%@ include file="/WEB-INF/jsp/com/include/location.jspf" %>
        </div></div>
        <form name="searchForm" id="searchForm" action="" method="POST" onSubmit="return false">
        <input type="hidden" name="pageIndex" id="pageIndex" value="${ bizNwrkMgmtSearchVO.pageIndex }"/>
        <input type="hidden" name="selectedCarCd" id="selectedCarCd" value=""/>
        <div id="article">
            <p class="default-desc"><img src="/kr/images/counsel/txt_counsel_branch_inquiry03_01.gif" alt="지역을 선택한 후 하단에 차량을 클릭하시면 전시차 정보를 보실 수 있습니다." /></p>
<!--             <select class="select select-type2" id="brDtlAdr1" name="brDtlAdr1" style="width:100px;" onChange="fnSelectIndex(this.value, '', '2');"> -->
            <select class="select1 select-type2" id="brDtlAdr1" name="brDtlAdr1" style="width:100px;" onChange="fnListView('${ status.index }', $('#selectedCarCd').val());">
                <option value="">지역선택</option>
            <c:forEach var="wpa" items="${ wpaList }" varStatus="status">
                <option value="${ wpa.brDtlAdr1 }">${ wpa.brDtlAdr1 }</option>
            </c:forEach>
            </select>
            <div class="exhibit-car-list">
        <c:set var="cNum" scope="page" value="0"></c:set>
        <c:forEach var="car" items="${ carList }" varStatus="status">
            <c:if test="${cNum % 7 == 0}">
                <div class="section">
            </c:if>
                    <div id="carImgArea">
                        <img src="/kr/file/imagePathView.do?nrFilNm=trcarimage/${car.nrFilNm}" width="90" height="55" alt="차량 이미지" onclick="fnListView('${ status.index }', '<c:out value="${ car.carCd }"/>');"/>
                        <input type="hidden" value="<c:out value='${ car.carCd }'/>"/>
                        <p class="name"><c:out value="${ car.carNm }"/></p>
                    </div>
            <c:if test="${cNum % 7 == 6}">
                </div>
            </c:if>
        <c:set var="cNum" scope="page" value="${cNum + 1}"></c:set>
        </c:forEach>
            </div>
        </div>
            <h5 class="subsection"><img src="/kr/images/title/h5_counsel_branch_inquiry02_01.gif" alt="검색 결과" /></h5>
			<p>※ 전시 차량은 당사 사정에 따라 사전고지 없이 변경 될 수 있습니다. 방문 전에 꼭 해당 지점/대리점에 확인해주시기 바랍니다.</p>
			<div id="brListArea">
                <div class="boardlist-wrap subsection04">
                    <div class="list-status-wrap">
                        <p class="list-status">Page <b>0</b>/0</p>
                        <p class="result-status"><b>0</b>건의 검색결과가 있습니다.</p>
                    </div>
                    <table summary="번호, 지점명, 전화번호, 상세정보, 위치">
                    <caption>검색 결과 리스트</caption>
                    <colgroup>
                        <col width="7%" />
                        <col width="17%" />
                        <col width="14%" />
                        <col width="8%" />
                        <col width="9%" />
                        <col width="9%" />
                        <col width="13%" />
                        <col width="16%" />
                        <col width="7%" />
                    </colgroup>
                    <thead>
                    <tr>
                        <th scope="col">NO</th>
                        <th scope="col">지점/대리점명</th>
                        <th scope="col">전화번호</th>
                        <th scope="col">위치</th>
                        <th scope="col">전시차</th>
                        <th scope="col">등급</th>
                        <th scope="col">상세차종</th>
                        <th scope="col">칼라</th>
                        <th scope="col">이미지</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="center" colspan="9">상단의 차량을 선택해주세요</td>
                    </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
        </form>
    </div>
    <hr />
    <script>
    appendMETA('WT.ti','전시차 조회');
    </script>
    <%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>
    <div id="carViewArea"></div>
    <div id="popContents"></div>